﻿@model PortraitModel
@{
    ViewBag.Title = "头像编辑";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section Custom{
    <link href="@Url.Content("~/Content/jquery.jcrop.css")" rel="stylesheet" />
    <script src="@Url.Content("~/Scripts/jquery.jcrop-0.9.10.min.js")" type="text/javascript"></script>
}

<section class="pe-basic">

    @Html.Partial("_PersonalPartial")

    <div class="content">
        <h4>头像编辑</h4>
        @using (Html.BeginForm())
        {
            @Html.AntiForgeryToken()

            if (Model.ImageTemp != null)
            {
            <div class="field">
                <div class="editor-label">
                </div>
                <div class="editor-field">
                    <img alt="" class="corp" src="/Assets/temp/@(Model.ImageTemp).jpg" />
                    @Html.HiddenFor(model => model.ImageTemp)
                    @Html.HiddenFor(model => model.ImageX1)
                    @Html.HiddenFor(model => model.ImageY1)
                    @Html.HiddenFor(model => model.ImageX2)
                    @Html.HiddenFor(model => model.ImageY2)
                    @Html.HiddenFor(model => model.ImageWidth)
                    @Html.HiddenFor(model => model.ImageHeight)
                </div>
            </div>
            }
            <div class="field">
                <div class="editor-label">
                </div>
                <div class="editor-field">
                    <input type="submit" value="保存" />
                    <a href="Portrait">返回</a>
                </div>
            </div>
        }
    </div>
</section>
<script type="text/javascript">

    $('.corp').Jcrop({
        onChange: function (c) {
            $('#ImageX1').val(c.x);
            $('#ImageY1').val(c.y);
            $('#ImageX2').val(c.x2);
            $('#ImageY2').val(c.y2);
            $('#ImageWidth').val(c.w);
            $('#ImageHeight').val(c.h);
        },
        onSelect: function (c) {
            $('#ImageX1').val(c.x);
            $('#ImageY1').val(c.y);
            $('#ImageX2').val(c.x2);
            $('#ImageY2').val(c.y2);
            $('#ImageWidth').val(c.w);
            $('#ImageHeight').val(c.h);
        },
        onRelease: function clearCoords() {
            $('#ImageX1, #ImageY1, #ImageX2, #ImageY2, #ImageWidth, #ImageHeight').val('');
        }
    }, function () {
        this.setOptions({
            aspectRatio: 1 / 1,
            allowMove: true,
            allowSelect: false,
            minSize: [252, 252]
        });
        this.animateTo([0, 0, 252, 252]);
        this.focus();
    });

</script>
